
<template>
    <div v-if="!$store.state.isMobileAndPc">
        <div class="headersFixed ">
            <div class='headers-logo'>
                <img src="https://static.pdwl.net/jituan/images/logo.png">
            </div>
            <div class="flex_cen headers-center">
                <div class="headers-center-data" v-for="(item, idx) of headersList" :key="idx"
                    @click="headersListClick(item, idx)">
                    <div class="text" style="font-size: 15px" v-if="idx !== 1 && idx != 3">{{ item.name }}</div>
                    <div v-else-if="idx == 1">
                        <el-dropdown @command="(e) => headersListCommand(e, item, idx)" style="width:100px
                        ">
                            <span class="el-dropdown-link" style="font-size: 15px">
                                {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="3">智企云平台</el-dropdown-item>
                                <el-dropdown-item :command="1">牛视3.0</el-dropdown-item>
                                <el-dropdown-item :command="2">易播数字人</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="idx == 3">
                        <el-dropdown @command="(e) => aboutUsCommand(e, item, idx)">
                            <span class="el-dropdown-link" style="font-size: 15px">
                                {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="2">品达集团</el-dropdown-item>
                                <el-dropdown-item :command="1">新闻资讯</el-dropdown-item>
                                <el-dropdown-item :command="3">关于我们</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="headers-center-data-bar" v-if="activeIdx !== idx"
                        :class="{ 'headers-center-data-bar-active': activeIdx == idx }"></div>
                    <div class="headers-center-data-bar-active" v-else></div>
                </div>
            </div>
            <div class='headersFixed-phone'>
                400-757-8688
            </div>
            <div class='headersFixed-info'>
                <vs-button @click="openInfoDialog" style="
                        background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 16px;
                        padding: 0px 0;
                        width: 100px;
                        margin-top: 0px;
                        border-radius:8px;">申请试用</vs-button>
            </div>
        </div>

        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
    <div v-else class="mobileHea">
        <div class="mobile-headers flex_bet" :style="{background:$route.name=='formPage'?'#000':'transparent'}">
            <div class='mobile-headers-logo'>
                <img src="https://static.pdwl.net/jituan/images/mobile/logo.png">
            </div>
            <div class='mobile-headers-more' @click="mobileDrawer = true">
                <i class="iconfont icon-gengduo" style="font-size:25px"></i>
            </div>
        </div>
        <el-drawer :visible.sync="mobileDrawer" direction="rtl" :with-header="false" size="75%" :before-close="drawerClose"
            :show-close="false" :modal="false">
            <div class="mobileHea-close flex_end">
                <i @click="mobileDrawer = false" class="el-icon-close"></i>
            </div>
            <div>
                <el-menu :default-active="activeIdx" class="el-menu-vertical-demo" background-color="#242424"
                unique-opened
                    text-color="#fff" @select="selectMenu" active-text-color="#ffd04b">
                    <el-menu-item index="0" class="content">
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu  index="1" class="submenu">
                        <template slot="title">
                            <span class="text">核心产品</span>
                        </template>
                        <el-menu-item index="1-1" class="content-item">智企云平台</el-menu-item>
                        <el-menu-item index="1-2" class="content-item">牛视3.0</el-menu-item>
                        <el-menu-item index="1-3" class="content-item">易播数字人</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="2" class="content">
                        <span slot="title" class="title">核心技术</span>
                    </el-menu-item>
                    <el-submenu index="3" class="submenu">
                        <template slot="title">
                            <span class="text">关于我们</span>
                        </template>
                        <el-menu-item index="3-2" class="content-item">品达集团</el-menu-item>
                        <el-menu-item index="3-1" class="content-item">新闻资讯</el-menu-item>
                        <el-menu-item index="3-3" class="content-item">关于我们</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4" class="content">
                        <span slot="title" class="title">渠道合作</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="drawer-phone flex_spa">
                400-757-8688 <vs-button @click="makePhone" style="
                        background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 16px;
                        padding: 0px 0;
                        width: 100px;
                        border-radius:100px;">拨打电话</vs-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import InfoDialog from '@/components/infoDialog'
export default {
    components: { InfoDialog },
    props: {
        isScrollTop: {
            type: Boolean,
            default: false
        }
    },
    data: () => ({
        mobileDrawer: false,
        menuList: [],
        headersList: [
            {
                path: '/',
                name: '首页'
            },
            {
                path: '/solution',
                name: '核心产品'
            },
            {
                path: '/coreTechnology',
                name: '核心技术'
            },
            {
                path: '/aboutUs',
                name: '关于我们'
            },
            {
                path: '/channel',
                name: '渠道合作'
            }
        ],
        activeIdx: '0',
        oldPath: null
    }),
    watch: {
        $route: {
            handler(val, old) {
                this.activeIdx = this.headersList.findIndex(item => item.path == val.path) + ''
            },
            deep: true,
            immediate: false
        }
    },
    mounted() {
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
    },
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/logo.png"
        ]
        imgs.forEach((item) => {
            let img = new Image();
            img.src = item;
            img.onload = function () { }
        })
    },
    methods: {
        selectMenu(idx) {
            let index = idx
            if (['1-1', '1-2', '1-3'].includes(idx)) index = 1
            if (['3-1', '3-2', '3-3'].includes(idx)) index = 3
            let item = this.headersList[index]
            let command = 0
            if (idx == '1-1') command = 3
            if (idx == '1-2') command = 1
            if (idx == '1-3') command = 2

            if (idx == '3-1') command = 1
            if (idx == '3-3') command = 3
            if (idx == '3-2') command = 2
            if (['1-1', '1-2', '1-3'].includes(idx)) {
                this.headersListCommand(command, item, index)
            } else if (['3-1', '3-3', '3-2'].includes(idx)) {
                this.aboutUsCommand(command, item, index)
            } else {
                this.headersListClick(item, index)
            }
            console.log(command)
            setTimeout(() => {
                this.mobileDrawer = false
            }, 10);
        },
        drawerClose() {
            this.mobileDrawer = false
        },
        openInfoDialog() {
            this.$refs.infoDialog.openInfoDialog()
        },
        makePhone(){
            window.location.href= 'tel://400-757-8688'
        },
        headersListCommand(command, item, idx) {
            window.scrollTo(0, 0);
            this.headersListClick(item, idx,command)
            this.$store.commit('setSolutionType', command)
        },
        aboutUsCommand(command, item, idx) {
            window.scrollTo(0, 0);
            this.headersListClick(item, idx,command)
            this.$store.commit('setAboutUsType', command)
        },
        headersListClick(item, idx,command = null) {
            if((idx == 1 || idx == 3) && !command)return
            let path = item.path && item.path
            if(command == 3 && idx == 1 ) path = '/digitalEmployee'
            else if(command == 1 && idx == 1  )path = '/bovineVision'
            else if(command == 2 && idx == 1  )path = '/digitalMan'
            else if(command == 2 && idx == 3  )path = '/companyIntroduction'
            else if(command == 1 && idx == 3  )path = '/news'
            else if(command == 3 && idx == 3  )path = '/aboutUs'
            if(this.oldPath == path) return
            this.oldPath = path
            // if (this.activeIdx != idx && item.path) {
                this.$router.push({ path: path })
            // }
            this.activeIdx = idx
        }
    }
}
</script>
<style lang="scss" scoped>
.headers {
    background: rgba(0, 0, 0, .4);
    color: #fff;
    padding: 20px 0;
    position: relative;

    .headers-logo {
        position: absolute;
        top: 14px;
        left: 82px;
        width: 120px;
        height: 36px;

        img {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
        }

    }

    .headers-center {
        ::v-deep .el-dropdown {
            color: #fff;
        }

        &-data {
            margin-right: 60px;
            cursor: pointer;
            width: 86px;
            text-align: center;
            position: relative;

            &-bar {
                margin-top: 6px;
                width: 0px;
                height: 3px;
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                transition: width 1s;
            }

            &-bar-active {
                margin-top: 6px;
                width: 86px;
                height: 3px;
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
            }

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                .headers-center-data-bar {
                    width: 86px;
                }
            }
        }

    }

}

.headersFixed {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 9;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    padding: 20px 0;

    .headers-logo {
        position: absolute;
        top: 14px;
        left: 82px;
        width: 120px;
        height: 36px;

        img {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
        }

    }

    .headersFixed-info {
        position: absolute;
        top: 14px;
        right: 40px;
        width: 120px;
        height: 36px;
    }

    .headersFixed-phone {
        position: absolute;
        top: 22px;
        right: 240px;
        font-weight: bold;
        font-size: 20px;
        background: linear-gradient(90deg, #006FFF 0%, #62DEA6 60%, #62DEA6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .headers-center {
        ::v-deep .el-dropdown {
            color: #fff;
        }

        &-data {
            margin-right: 60px;
            cursor: pointer;
            width: 86px;
            text-align: center;
            position: relative;

            &-bar {
                margin-top: 6px;
                width: 0px;
                height: 3px;
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                transition: width 1s;
            }

            &-bar-active {
                margin-top: 6px;
                width: 86px;
                height: 3px;
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
            }

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                .headers-center-data-bar {
                    width: 86px;
                }
            }
        }

    }

}

.mobileHea {
    ::v-deep .el-drawer {
        background-color: #242424 !important;
        color: #fff;
    }

    .mobile-headers {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 20px 0px;
        width: 100%;
        z-index: 90;
        color: #fff;

        .mobile-headers-logo {
            width: 100px;
            height: 88px;
            margin-left: 40px;

            img {
                width: 100%;
                height: 100%;
                background-size: 100% 100%;
            }
        }

        .mobile-headers-more {
            width: 90px;
            height: 90px;
            text-align: center;
            margin-right: 40px;
            line-height: 90px;
            border-radius: 50%;
            background-color: #666D77;
        }
    }

    .content {
        font-size: 36px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        margin-top: 80px;

        line-height: 28px;

        .text {
            font-size: 36px;

        }
    }

    .submenu {
        margin-top: 50px;
        font-size: 36px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;

        .text {
            font-size: 36px;

        }
    }

    .content-item {
        font-size: 28px;
        font-family: Source Han Sans CN-Normal, Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin-top: 50px;
    }

    .mobileHea-close {
        margin-top: 50px;
        margin-right: 50px;

        i {
            font-size: 48px;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }
    }

    .drawer-phone {
        position: absolute;
        bottom: 40px;
        width: 100%;
        left: 0;
        right: 0;
        background-color: #242424;
        font-size: 32px;
        font-family: Source Han Sans CN-Normal, Source Han Sans CN;
        font-weight: 400;
    }

    ::v-deep .el-submenu__title i {
        color: #fff !important;
        font-size: 30px;
    }
}
</style>

        